<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: #ccc;height: 1000px;">
        <!-- 防抖是防止函数一直执行
        节流是什么？
        //防抖就是  指的是触发事后再n秒内函数只执行一次，若在n秒内再次触发则重新计算
        例如滚动条加载事件一样，执行过程中在有限的时间内执行过方法会清除了，重新计时，一旦停下来，才会继续执行

        //节流就是
            39滴焊锡；节省流量
            连续发生的事件，在n秒内，只执行一次函数；用的最多就是即时查询，搜索；
        类似于输入框的时候，点击搜索之后，一定的时间内再点击，不会再执行方法。 -->
    </div>
    <script>
        //防抖
        function debounce(func,delay){
            let timeout;
            return function(){
                if(timeout){
                    clearTimeout(timeout)
                }
                timeout = setTimeout(function(){
                    func.apply(this,arguments)
                },delay)
            }
        }
        function showInfo(){
            console.log('3333')
        }
        

        //节流//输入完立即查询，过2秒才能查询(立即执行)
        function debouncejieliu(func,delay){
            let timeout;
            return function(){
                if(timeout){
                    clearTimeout(timeout) 
                }    //取消之前的任务
                let callNow = !timeout; //类型转换
                timeout = setTimeout(()=>{  //增加一个定时器
                    timeout = null  //清除当前的定时器
                },delay)
                if(callNow){
                    func.apply(this)  //第一次执行；
                }
            }
        }

        function throttle(func,delay){
            let canRun = true; // 通过闭包保存一个标记
            return function () {
                if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
                canRun = false; // 立即设置为false
                setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
                    func.apply(this, arguments);
                    // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
                    canRun = true;
                }, delay);
            };
        }
        window.onscroll=debounce(showInfo,1000)
    </script>
</body>
</html>